<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<meta http-equiv="Content-Script-Type" content="text/javascript" />
	<title>jQselectable with using AjaxZip2</title>
	<link type="text/css" rel="stylesheet" href="css/style.css" />
	<link type="text/css" rel="stylesheet" href="skin/selectable/style.css" />
	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
	<script type="text/javascript">google.load("jquery", "1.3.2");</script>
	<script type="text/javascript" src="js/jQselectable.js"></script>
	<script type="text/javascript" src="js/ajaxzip2.js"></script>
	<script type="text/javascript">
	jQuery(function($){
		// pref is jQselectable instance
		var pref = $("#pref").jQselectable({
			set: "fadeIn",
			setDuration: "fast",
			opacity: .9
		});
		
		$("#zip").keyup(function(){
			// AjaxZip2
			AjaxZip2.zip2addr(this,"pref","addr");
		}).blur(function(){
			// rebuilds target jQselectable element
			pref.rebuild();
		})
	});
	</script>
</head>

<body>
<p class="note"><a href="http://jqselectable.googlecode.com/">Project Home</a> | <a href="http://moto-mono.net/">5509</a></p>
<div class="pagebody">
	<h1>jQselectable with using AjaxZip2</h1>
	
	<h2>jQselectable</h2>
	<dl>
		<dt>Zipcode</dt>
		<dd><input type="text" id="zip" name="zip" value="" /></dd>
		<dt>Prefecture</dt>
		<dd>
			<select id="pref" name="pref" class="selectable">
				<optgroup label="北海道">
					<option value="1">北海道</option>
				</optgroup>
				<optgroup label="東北">
					<option value="2">青森県</option>
					<option value="3">岩手県</option>
					<option value="4">宮城県</option>
					<option value="5">秋田県</option>
					<option value="6">山形県</option>
					<option value="7">福島県</option>
				</optgroup>
				<optgroup label="関東">
					<option value="8">茨城県</option>
					<option value="9">栃木県</option>
					<option value="10">群馬県</option>
					<option value="11">埼玉県</option>
					<option value="12">千葉県</option>
					<option value="13">東京都</option>
					<option value="14">神奈川県</option>
				</optgroup>
				<optgroup label="北陸">
					<option value="15">新潟県</option>
					<option value="16">富山県</option>
					<option value="17">石川県</option>
					<option value="18">福井県</option>
					<option value="19">山梨県</option>
					<option value="20">長野県</option>
				</optgroup>
				<optgroup label="東海">
					<option value="21">岐阜県</option>
					<option value="22">静岡県</option>
					<option value="23">愛知県</option>
					<option value="24">三重県</option>
				</optgroup>
				<optgroup label="関西">
					<option value="25">滋賀県</option>
					<option value="26">京都府</option>
					<option value="27">大阪府</option>
					<option value="28">兵庫県</option>
					<option value="29">奈良県</option>
					<option value="30">和歌山県</option>
				</optgroup>
				<optgroup label="中四国">
					<option value="31">鳥取県</option>
					<option value="32">島根県</option>
					<option value="33">岡山県</option>
					<option value="34">広島県</option>
					<option value="35">山口県</option>
					<option value="36">徳島県</option>
					<option value="37">香川県</option>
					<option value="38">愛媛県</option>
					<option value="39">高知県</option>
				</optgroup>
				<optgroup label="九州">
					<option value="40">福岡県</option>
					<option value="41">佐賀県</option>
					<option value="42">長崎県</option>
					<option value="43">熊本県</option>
					<option value="44">大分県</option>
					<option value="45">宮崎県</option>
					<option value="46">鹿児島県</option>
				</optgroup>
				<optgroup label="沖縄">
					<option value="47">沖縄県</option>
				</optgroup>
			</select>
		</dd>
		<dt>Address</dt>
		<dd><input type="text" name="addr" value="" /></dd>
	</dl>
	
	<p class="copy">Copyright 2010 <a href="http://moto-mono.net">5509</a> Some Rights Reserved.</p>
</div>

</body>
</html>
